<template>

  <div class="xmdetail">
    <div style="margin-left:70% ">
      <el-button v-permission="'chushai'" v-if="xmDetail.xmzt === '0'" @click="sxVisible = true" type="primary">初步筛选</el-button>
      <el-button v-permission="'luYanLuRu'" v-if="xmDetail.xmzt === '1'" type="warning" @click="lylrVisible = true">路演情况录入</el-button>
      <el-button v-permission="'approval'" v-if="xmDetail.xmzt === '3'" type="success" @click="spVisible = true">审批</el-button>
    </div>
    <el-tabs v-model="activeName">
      <el-tab-pane label="基本信息" name="jbxx">
        <el-descriptions :border="true">
          <el-descriptions-item label="项目名称">{{ xmDetail.xmMc }}</el-descriptions-item>
          <el-descriptions-item label="项目所属学院">{{ xmDetail.xmSsxy }}</el-descriptions-item>
          <el-descriptions-item label="项目状态">
            <el-tag size="small" effect="dark" v-if="xmDetail.xmzt === '0'">已申请</el-tag>
            <el-tag size="small" effect="dark" type="success" v-if="xmDetail.xmzt === '1'">通过初筛</el-tag>
            <el-tag size="small" effect="dark" type="danger" v-if="xmDetail.xmzt === '2'">未过初筛</el-tag>
            <el-tag size="small" effect="dark" type="success" v-if="xmDetail.xmzt === '3'">合格</el-tag>
            <el-tag size="small" effect="dark" type="danger" v-if="xmDetail.xmzt === '4'">不合格</el-tag>
            <el-tag size="small" effect="dark" type="success" v-if="xmDetail.xmzt === '5'">审批通过</el-tag>
            <el-tag size="small" effect="dark" type="danger" v-if="xmDetail.xmzt === '6'">审批不通过</el-tag>
            <el-tag size="small" effect="dark" v-if="xmDetail.xmzt === '7'">入驻</el-tag>
            <el-tag size="small" effect="dark" type="info" v-if="xmDetail.xmzt === '-1'">退驻</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="填报人">{{ xmDetail.xmTbrmc }}</el-descriptions-item>
          <el-descriptions-item label="填报时间">{{ xmDetail.xmTbsj }}</el-descriptions-item>
          <el-descriptions-item label="项目类型">
            <el-tag size="small" effect="dark" v-if="xmDetail.xmXmlxbh === '00'">现代农业</el-tag>
            <el-tag size="small" effect="dark" type="info" v-if="xmDetail.xmXmlxbh === '01'">制造业</el-tag>
            <el-tag size="small" effect="dark" type="success" v-if="xmDetail.xmXmlxbh === '02'">信息技术服务</el-tag>
            <el-tag size="small" effect="dark" type="warning" v-if="xmDetail.xmXmlxbh === '03'">文化创意服务</el-tag>
            <el-tag size="small" effect="dark" type="danger" v-if="xmDetail.xmXmlxbh === '04'">社会服务</el-tag>
          </el-descriptions-item><br/>
          <el-descriptions-item v-if="xmDetail.xmzt == 2 || xmDetail.xmzt == 4"  span="3" label="驳回理由"><span style="color: red;">{{ xmDetail.xmBhly }}</span></el-descriptions-item><br/>
          <el-descriptions-item  span="3" label="项目简介">{{ xmDetail.xmJj }}</el-descriptions-item><br/>
          <el-descriptions-item span="3" label="项目创新点">{{ xmDetail.xmcxd }}</el-descriptions-item><br/>
          <el-descriptions-item span="3" label="项目背景">{{ xmDetail.xmBj }}</el-descriptions-item><br/>
          <el-descriptions-item span="3" label="项目意义">{{ xmDetail.xmYy }}</el-descriptions-item><br/>
          <el-descriptions-item span="3" label="市场需求分析">{{ xmDetail.xmScxqfx }}</el-descriptions-item><br/>
          <el-descriptions-item span="3" label="项目关键技术介绍">{{ xmDetail.xmGjjsjs }}</el-descriptions-item><br/>
        </el-descriptions>
      </el-tab-pane>
      <el-tab-pane label="项目成员" name="xmcy">
        <el-table stripe :border="true"
                  :data="xmcys"
                  style="width: 90%;margin-bottom: 15px;position: relative;left: 50%;transform: translateX(-50%);">
          <el-table-column prop="cyXh" label="学号" width="130px" header-align="center" align="center">
          </el-table-column>
          <el-table-column prop="cyMc" label="姓名" width="110px" header-align="center" align="center">
          </el-table-column>
          <el-table-column prop="cySjh" label="手机号" width="150px" header-align="center" align="center">
          </el-table-column>
          <el-table-column prop="cyXy" label="所属学院" width="150px" header-align="center" align="center">
          </el-table-column>
          <el-table-column prop="cyBj" label="班级" width="140px" header-align="center" align="center">
          </el-table-column>
          <el-table-column prop="cyJs" label="介绍" width="400px" header-align="center" align="center">
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="计划书" name="jhs">计划书
<!--        <iframe id="wordViewer" style="width: 100%; height: 600px;"></iframe>-->
        <el-table stripe :border="true" v-if="xmDetail.xmJhsdz !== ''"
                  :data="[{xmBh:xmbh,xmJhsdz:xmDetail.xmJhsdz}]"
                  style="width: 90%;margin-bottom: 15px;position: relative;left: 50%;transform: translateX(-50%);">
          <el-table-column prop="xmJhsdz" label="文件名"  header-align="center" align="center">
          </el-table-column>
          <el-table-column align="center" fixed="right" label="操作">
            <template slot-scope="scope">
              <el-button @click="downloadJhs(scope.row.xmJhsdz)" type="primary" size="mini">下载计划书
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="获奖情况" name="hjqk">
        <el-table stripe :border="true"
                  :data="xmhjqk"
                  style="width: 90%;margin-bottom: 15px;position: relative;left: 50%;transform: translateX(-50%);">
          <el-table-column prop="xmMc" label="项目名称" width="300px" header-align="center" align="center">
          </el-table-column>
          <el-table-column prop="bsMc" label="比赛名称" width="300px" header-align="center" align="center">
          </el-table-column>
          <el-table-column prop="bsJbmc" label="比赛级别" width="140px" header-align="center" align="center">
          </el-table-column>
          <el-table-column prop="djmc" label="获奖等级" width="140px" header-align="center" align="center">
          </el-table-column>
          <el-table-column prop="hjzm" label="获奖证明" width="400px" header-align="center" align="center">
            <template #default="scope">
              <el-image
                  style="width: 100px; height: 100px"
                  :src="'https://www.sdvcst.edu.cn/__local/2/C8/40/8CEC87AE780FBC2CE8FBD5D3846_5A417446_6619C.jpg'"
                  :preview-src-list="[scope.row.hjzm]"
                  preview-teleported="true">
              </el-image>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>

    <el-dialog title="初步筛选" :visible.sync="sxVisible" width="30%" >
      <el-form :model="cs" label-position="right" label-width="130px">
        <el-form-item label="是否通过" >
          <el-radio v-model="cs.xmzt" label="1">通过初筛</el-radio>
          <el-radio v-model="cs.xmzt" label="2">未过初筛</el-radio>
        </el-form-item>
        <el-form-item label="通过意见/驳回理由">
          <el-input type="textarea" :rows="3" v-model="cs.xmCsyj" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="sxVisible = false">取 消</el-button>
        <el-button type="primary" @click="shaixuan">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="路演情况录入" :visible.sync="lylrVisible" width="30%">
      <el-form :model="ly">
        <el-form-item label="是否合格" label-width="100px">
          <el-radio v-model="ly.xmzt" label="3">合格</el-radio>
          <el-radio v-model="ly.xmzt" label="4">不合格</el-radio>
        </el-form-item>
        <el-form-item label="计算分数" label-width="100px">
          <el-input v-model="ly.xmLyfs" type="number"></el-input>
        </el-form-item>
        <el-form-item label="评委意见汇总" label-width="100px">
          <el-input type="textarea" :rows="3" v-model="ly.xmLypwyjhz" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="lylrVisible = false">取 消</el-button>
        <el-button type="primary" @click="luYanLuRu">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="项目最终审批" :visible.sync="spVisible" width="30%">
      <el-form :model="sp">
        <el-form-item label="是否审批通过" label-width="120px">
          <el-radio v-model="sp.xmzt" label="5">审批通过</el-radio>
          <el-radio v-model="sp.xmzt" label="6">审批不通过</el-radio>
        </el-form-item>
        <el-form-item label="通过意见/驳回理由" label-width="80px">
          <el-input type="textarea" :rows="3" v-model="sp.xmSpyj" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="spVisible = false">取 消</el-button>
        <el-button type="primary" @click="approval">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import axios from "../../axios/axios.js";
import {chushai,luYanLuRu,approval} from "@/api/cxcyxm"
export default {
  data() {
    return {
      xmbh:"",
      xmDetail: {},
      xmcys:[],
      activeName: 'jbxx',
      xmhjqk:[],
      sxVisible:false,
      lylrVisible:false,
      spVisible:false,
      cs:{
        xmCsyj:"",
        xmzt:"1",
      },
      ly:{
        xmzt:"3",
        xmLyfs:"0",
        xmLypwyjhz:"",
      },
      sp:{
        xmSpyj:"",
        xmzt:"5",
      },
    }
  },
  created() {
     this.xmbh = this.$route.query.xmbh
    this.toXmDetail();
    // this.showJhs();
  },
  methods: {
    showJhs(){
      axios.get('/cxcyXm/getFiles/' + this.xmDetail.xmJhsdz, {
        responseType: 'blob'
      }).then(response => {
            var fileURL = URL.createObjectURL(response.data);
            var iframe = document.getElementById('wordViewer');
            iframe.src = fileURL;
          }).catch(error => {
            console.error(error);
          });
    },
    toXmDetail() {
      axios({
        method: 'GET',
        url: '/cxcyXm/queryCxcyXmByBh/' + this.xmbh
      }).then(res => {
        if (res.code === "200") {
          this.xmDetail = res.data.xmDetail
          this.xmcys = res.data.xmcyList
          this.xmhjqk = res.data.xmHjqkList
        } else {
          this.$message.error(res.msg)
        }

      })
    },
    shaixuan(){
      this.sxVisible = false;
      chushai({
        xmBh:this.xmbh,
        xmCsyj:this.cs.xmCsyj,
        xmzt:this.cs.xmzt,
      }).then(res =>{
        if (res.code === "200") {
          this.$message.success("项目初筛成功！")
          this.toXmDetail()
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    luYanLuRu(){
      this.lylrVisible = false;
      luYanLuRu({
        xmBh:this.xmbh,
        xmLyfs:this.ly.xmLyfs,
        xmzt:this.ly.xmzt,
        xmLypwyjhz:this.ly.xmLypwyjhz,
      }).then(res =>{
        if (res.code === "200") {
          this.$message.success("项目路演情况录入成功！")
          this.toXmDetail()
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    approval(){
      this.spVisible = false;
      approval({
        xmBh:this.xmbh,
        xmzt:this.sp.xmzt,
        xmSpyj:this.sp.xmSpyj,
      }).then(res =>{
        if (res.code === "200") {
          this.$message.success("项目审批成功！")
          this.toXmDetail()
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    downloadJhs(jhsdz){
      // exportWordAndImage(jhsdz);
      const x = new XMLHttpRequest();
      x.open("GET", jhsdz, true);
      x.responseType = "blob";
      x.onload = function () {
        const url = window.URL.createObjectURL(x.response);
        const elink = document.createElement("a");
        elink.href = url;
        elink.target = "_self"; // 当前也 target打开新页面
        elink.setAttribute("download", jhsdz);
        elink.style.display = "none";
        document.body.appendChild(elink);
        elink.click();
        document.body.removeChild(elink);
      };
      x.send();
    }
  }

}
</script>
<style>
.xmdetail{
  padding:40px 80px 0px 80px;
}

.dhText{
  overflow: hidden; /* 超出部分隐藏 */
  display: -webkit-box; /* 使用弹性盒子布局 */
  -webkit-line-clamp: 3; /* 行数限制为3 */
  -webkit-box-orient: vertical; /* 垂直排列 */
}
</style>
